import React, { useEffect } from "react";
import { useRoutes, useLocation } from "react-router-dom";
import routes from "./router/Index";
import "antd-mobile/es/global";

// 定义路由匹配的类型
interface Route {
  path: string;
  title: string;
}

function App() {
  const element = useRoutes(routes);
  const location = useLocation();

  useEffect(() => {
    const match: Route | undefined = routes.find(
      (route: Route) => route.path === location.pathname
    );
    document.title = match?.title.trim() || ""; // 使用可选链运算符
  }, [location]); // 依赖 location，以便在路由变化时重新运行 effect

  return <>{element}</>;
}

export default App;
